<template>
  <view class="page-header-container" :style="{paddingTop:headerArea.status_height+'px'}">
    <view class="header" :style="{height:headerArea.title_height+'px'}">
      <view class="left" @click="goBack">
        <slot name="left"></slot>
      </view>
      <view class="title">{{title}}</view>
      <view class="right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    title:{
      type:String,
      default:''
    }
  },
  computed:{
    headerArea() {
      let area = uni.getSystemInfoSync();
      // #ifdef MP-WEIXIN
      let menu = uni.getMenuButtonBoundingClientRect();
      return {
        status_height: area.statusBarHeight,
        title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
        menuLeft: menu.left
      };
      // #endif
      // #ifndef MP-WEIXIN
      return {
        status_height: area.statusBarHeight,
        title_height: uni.upx2px(80),
        menuLeft: 0
      };
      // #endif
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.page-header-container{
  .header{
    width: 100%;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:20rpx;
    .title{
      flex:1;
    }
  }
}

</style>